import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.less'
import api from '../../service/api';
import WriteBox from '../../components/WriteBox';
import { AtAvatar } from 'taro-ui'
import util from '../../utils/util';


export default class DoctorOrderDetail extends Taro.Component {

  config = {
    navigationBarTitleText: '问题详情'
  }


  constructor() {
    super(...arguments)
    this.state = {
        orderDetail:{
          "firstQuestionImgs": "[]",
          "firstReplyImgs": "[]",
          "secondQuestionImgs": "[]",
          "secondReplyImgs": "[]",
          "thirdQuestionImgs": "[]",
          "thirdReplyImgs": "[]",
        },
        time:'',
        answerTimes:''
    }
  }

  componentDidMount() {
    let params = {}
    params.orderNum = this.$router.params.orderNum
    params.role = Taro.getStorageSync('loginInfo').role

    api.get('/inquiry/find/inquiryDetail', params).then(res=>{
      if(res.data.status == '200'){
        this.setState({
          orderDetail:res.data.data
        })
      }
    })

    this.isTimeOver()
   }

   //判断24小时结束
   isTimeOver = (e) =>{
    let newTime = new Date().getTime()
    let endQuestionTime = new Date(e).getTime()+24*60*60*1000
    // console.log(newTime)
    // console.log(endQuestionTime)
    let isTime = null
    if(endQuestionTime - newTime > 0){
      // console.log('没过期')
      isTime = true
    }else{
      // console.log('过期了')
      isTime = false
    }
    return isTime
   }

    //倒计时
    timeIsDown = (e) => {

      /* 实时倒计时代码 */
      // setTimeout(this.timeIsDown,1000);
      // this.setState({
      //   time:util.timeDown(e)
      // })

      return util.timeDown(e).hou + '小时' + util.timeDown(e).min + '分'
    }

    userQuestionTimes(){
      let time = null
      let showUserBox = false
      let remainingTime = null
      let questionData = {}
      if(this.state.orderDetail.secondQuestionContent == undefined &&this.state.orderDetail.secondQuestionContent !== undefined){
        showUserBox = true
        remainingTime = '2'
        time = '2'
      }else if(this.state.orderDetail.thirdQuestionContent == undefined && this.state.orderDetail.thirdReplyContent !== undefined){
        showUserBox = true
        remainingTime = '1'
        time = '3'
      }
      questionData.showUserBox = showUserBox
      questionData.remainingTime = remainingTime
      questionData.time = time

      return questionData
    }

    doctorReplyTimes(){
      let time = null
      let showDoctorBox = false
      let replyData = {}
      if(this.state.orderDetail.firstQuestionContent !== undefined &&this.state.orderDetail.firstReplyContent == undefined){
        time = '1'
        showDoctorBox = true
      }else if(this.state.orderDetail.secondQuestionContent !== undefined &&this.state.orderDetail.secondQuestionContent == undefined){
        time = '2'
        showDoctorBox = true
      }else if(this.state.orderDetail.thirdQuestionContent !== undefined && this.state.orderDetail.thirdReplyContent == undefined){
        time = '3'
        showDoctorBox = true
      }
      replyData.time = time
      replyData.showDoctorBox = showDoctorBox
      return replyData
    }


  render() {

    //判断头部信息
    let headTop = null
    if(Taro.getStorageSync('loginInfo').role == 1){
      headTop = <View>
                  <Text className='list-item-name'>{this.state.orderDetail.doctorName}</Text>
                  <Text className='list-item-level'>{this.state.orderDetail.doctorTitle}</Text>
                  <View className='list-item-hospital'>
                    {this.state.orderDetail.hospital}/{this.state.orderDetail.department}
                  </View>
                </View>
    }else{
      headTop = <Text className='list-item-name'>{this.state.orderDetail.nickName}</Text>
    }

    //图片
    // let img1  = JSON.parse(this.state.orderDetail.firstQuestionImgs)
    // let img2  = JSON.parse(this.state.orderDetail.secondQuestionImgs)
    // let img3  = JSON.parse(this.state.orderDetail.thirdQuestionImgs)
    // let replyImg1  = JSON.parse(this.state.orderDetail.firstReplyImgs)
    // let replyImg2  = JSON.parse(this.state.orderDetail.secondReplyImgs)
    // let replyImg3  = JSON.parse(this.state.orderDetail.thirdReplyImgs)

    // let firtImg1 = img1.map(item1 =>{
    //   return <Image className='list-item-main-image' src={item1} key={item1}  />
    // })
    // let firtImg2 = img2.map(item2 =>{
    //   return <Image className='list-item-main-image' src={item2} key={item2}  />
    // })
    // let firtImg3 = img3.map(item3 =>{
    //   return <Image className='list-item-main-image' src={item3} key={item3}  />
    // })
    // let doctorImg1 = replyImg1.map(reply1 =>{
    //   return <Image className='list-item-main-image' src={reply1} key={reply1}  />
    // })
    // let doctorImg2 = replyImg2.map(reply2 =>{
    //   return <Image className='list-item-main-image' src={reply2} key={reply2}  />
    // })
    // let doctorImg3 = replyImg3.map(reply3 =>{
    //   return <Image className='list-item-main-image' src={reply3} key={reply3}  />
    // })

    //显示输入框
    let showWriteBox = null
    if(Taro.getStorageSync('loginInfo').role == 1 && this.isTimeOver(this.state.orderDetail.firstReplyTime) && this.userQuestionTimes().showUserBox){
      showWriteBox = <View>
                        <View className='list-item-remain'>继续提问
                          <View className='list-item-remain-tips'>(问诊次数剩余 <Text className='list-item-remain-times'>{this.userQuestionTimes().remainingTime - 1}</Text>次)</View>
                        </View>
                        <WriteBox sendUserId={this.state.orderDetail.doctorUserId} sendQuestionCount={this.userQuestionTimes().time} orderNum={this.state.orderDetail.orderNum}></WriteBox>
                    </View>
    }

    if(Taro.getStorageSync('loginInfo').role == 2 && this.isTimeOver(this.state.orderDetail.firstQuestionTime) && this.doctorReplyTimes().showDoctorBox){
      showWriteBox = <View>
                        <View className='list-item-remain'>
                          回复患者
                        </View>
                        <WriteBox sendUserId={this.state.orderDetail.userId} sendQuestionCount={this.doctorReplyTimes().time} orderNum={this.state.orderDetail.orderNum}></WriteBox>
                    </View>
    }

    //显示用户底部提示
    let showUserTips = null
    if(Taro.getStorageSync('loginInfo').role == 1){
      if(this.state.orderDetail.orderStatus == 1){
        showUserTips = <View className='list-order-tips'>
                          医生还未开始接诊，若24小时内无接诊，则自动退还服务次数。
                        </View>
      }else if(this.state.orderDetail.orderStatus  == 4){
        showUserTips = <View className='list-order-tips'>
                          因医生未能按时接诊，此问题已关闭，对您带来的不便，我们深感抱歉（本次问诊不消耗次数）。
                        </View>
      }
      else if(this.state.orderDetail.orderStatus == 2){
        showUserTips = <View className='list-order-tips'>
                        距离结束问诊还有{this.timeIsDown(this.state.orderDetail.firstReplyTime)}
                    </View>
      }
    }

    //显示医生头部提示
    let showDoctorTips = null
    if(Taro.getStorageSync('loginInfo').role == 2){
      if(this.state.orderDetail.orderStatus == 1){
        showDoctorTips = <View className='top-tips'>{this.timeIsDown(this.state.orderDetail.firstQuestionTime)}未回复问诊自动关闭</View>
      }else if(this.state.orderDetail.orderStatus == 2){
        showDoctorTips = <View className='top-tips'>距离结束问诊还有：{this.timeIsDown(this.state.orderDetail.firstReplyTime)}</View>
      }
    }

    return (
      <View className='page'>
        <View className='page-top'>
          {showDoctorTips}
        </View>
        <View className='page-main'>
          <View className='list'>
            <View className='list-item'>
              {this.state.orderDetail.orderStatus == "1" && <View className='list-item-label list-item-label-wait'>
                待接诊
              </View>
              }
              {this.state.orderDetail.orderStatus == "2" && <View className='list-item-label list-item-label-now'>
                接诊中
              </View>
              }
              {this.state.orderDetail.orderStatus == "3" && <View className='list-item-label list-item-label-finish'>
                已结束
              </View>
              }
              {this.state.orderDetail.orderStatus == "4" && <View className='list-item-label list-item-label-finish'>
                关闭
              </View>
              }
              <View className='list-item-top'>
                <View className='at-row at-row__align--center'>
                  <View className='at-col at-col-12 flex-items-center'>
                    <AtAvatar circle image={this.state.orderDetail.headImage} size='small'></AtAvatar>
                    {headTop}
                  </View>
                </View>
              </View>

              <View className='list-item-box'>
                {this.state.orderDetail.firstQuestionContent && <View>
                    <View className='list-item-main'>
                      <Text className='list-item-main-times'>第一次提问</Text>{this.state.orderDetail.firstQuestionContent}
                    </View>
                    <View className='list-item-bottom'>
                      {util.formatDateTime(this.state.orderDetail.firstQuestionTime)}
                    </View>
                    <View className='list-item-main-image-list'>
                      {firtImg1}
                    </View>
                  </View>
                }
                {this.state.orderDetail.firstReplyContent && <View className='list-item-reply-box'>
                    <View className='at-row at-row__align--center'>
                      <View className='at-col at-col-12 flex-items-center'>
                      {
                          Taro.getStorageSync('loginInfo').role == 1
                          ?<View className='flex-items-center'>
                            <AtAvatar circle image={this.state.orderDetail.headImage} size='small'></AtAvatar>
                            <View>
                              <Text className='list-item-name'>{this.state.orderDetail.doctorName}</Text>
                              <Text className='list-item-reply'>回复了你的问题</Text>
                            </View>
                          </View>
                          :<View>
                            <Text className='list-item-userreply'>你回复了</Text>
                            <Text className='list-item-username'>{this.state.orderDetail.nickName}</Text>
                            <Text className='list-item-userreply'>的问题</Text>
                          </View>
                        }
                      </View>
                    </View>
                    <View className='list-item-reply-content'>
                      {this.state.orderDetail.firstReplyContent}
                      <View className='list-item-bottom'>
                        {util.formatDateTime(this.state.orderDetail.firstReplyTime)}
                      </View>
                      <View className='list-item-main-image-list'>
                        {doctorImg1}
                      </View>
                    </View>
                  </View>
                }
                {this.state.orderDetail.secondQuestionContent && <View>
                    <View className='list-item-main'>
                      <Text className='list-item-main-times'>第二次提问</Text>{this.state.orderDetail.secondQuestionContent}
                    </View>
                    <View className='list-item-bottom'>
                      {util.formatDateTime(this.state.orderDetail.secondQuestionTime)}
                    </View>
                    <View className='list-item-main-image-list'>
                      {firtImg2}
                    </View>

                  </View>
                  }
                  {this.state.orderDetail.secondReplyContent && <View className='list-item-reply-box'>
                    <View className='at-row at-row__align--center'>
                      <View className='at-col at-col-12 flex-items-center'>
                      {
                          Taro.getStorageSync('loginInfo').role == 1
                          ?<View>
                            <AtAvatar circle image={this.state.orderDetail.headImage} size='small'></AtAvatar>
                            <View className='flex-items-center'>
                              <Text className='list-item-name'>{this.state.orderDetail.doctorName}</Text>
                              <Text className='list-item-reply'>回复了你的问题</Text>
                            </View>
                          </View>
                          :<View>
                            <Text className='list-item-userreply'>你回复了</Text>
                            <Text className='list-item-username'>{this.state.orderDetail.nickName}</Text>
                            <Text className='list-item-userreply'>的问题</Text>
                          </View>
                        }
                      </View>
                    </View>
                    <View className='list-item-reply-content'>
                      {this.state.orderDetail.secondReplyContent}
                      <View className='list-item-bottom'>
                        {util.formatDateTime(this.state.orderDetail.secondReplyTime)}
                      </View>
                      <View className='list-item-main-image-list'>
                        {doctorImg2}
                      </View>
                    </View>
                  </View>
                }
                {this.state.orderDetail.thirdQuestionContent && <View>
                      <View className='list-item-main'>
                        <Text className='list-item-main-times'>第三次提问</Text>{this.state.orderDetail.thirdQuestionContent}
                      </View>
                      <View className='list-item-main-image-list'>
                      {firtImg3}
                    </View>
                      <View className='list-item-bottom'>
                        {util.formatDateTime(this.state.orderDetail.thirdQuestionTime)}
                      </View>
                    </View>
                  }
                  {this.state.orderDetail.thirdReplyContent && <View className='list-item-reply-box'>
                    <View className='at-row at-row__align--center'>
                      <View className='at-col at-col-12 flex-items-center'>
                      {
                          Taro.getStorageSync('loginInfo').role == 1
                          ?<View>
                            <AtAvatar circle image={this.state.orderDetail.headImage} size='small'></AtAvatar>
                            <View className='flex-items-center'>
                              <Text className='list-item-name'>{this.state.orderDetail.doctorName}</Text>
                              <Text className='list-item-reply'>回复了你的问题</Text>
                            </View>
                          </View>
                          :<View>
                            <Text className='list-item-userreply'>你回复了</Text>
                            <Text className='list-item-username'>{this.state.orderDetail.nickName}</Text>
                            <Text className='list-item-userreply'>的问题</Text>
                          </View>
                        }
                      </View>
                    </View>
                    <View className='list-item-reply-content'>
                      {this.state.orderDetail.thirdReplyContent}
                      <View className='list-item-bottom'>
                        {util.formatDateTime(this.state.orderDetail.thirdReplyTime)}
                      </View>
                      <View className='list-item-main-image-list'>
                        {doctorImg3}
                      </View>
                    </View>
                  </View>
                  }
              </View>


              {
                this.state.orderDetail.orderStatus == 2 && <View>
              {
                  this.isTimeOver(this.state.orderDetail.firstReplyTime)
                  ?<View>
                    {showUserTips}
                  </View>
                  : <View className='list-order-tips list-order-tips-red'>
                            提问时间已结束
                    </View>
                }
                </View>
              }



            </View>
          </View>
        </View>
        <View className='page-bottom'>
        {showWriteBox}
        </View>
      </View>
    )
  }
}
